<template>
  <div>
    <!-- 头部导航 -->
    <van-nav-bar
      title="京东注册"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 表单 -->
    <van-form @submit="register">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="用户名"
          label="请输入手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button
          round
          disabled
          block
          type="warning"
          native-type="submit"
          v-if="username.length !== 11"
        >
          下一步
        </van-button>
        <van-button round block type="danger" native-type="submit" v-else>
          下一步
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { showConfirmDialog } from "vant";
import { docheckphone } from "../../server/user.js";
export default {
  data() {
    return {
      username: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    register() {
      docheckphone({ tel: this.username }).then((res) => {
        if (res.code === "200") {
          showConfirmDialog({
            title: "提示",
            message: `将向手机号 ${this.username} 发送短信验证码`,
          })
            .then(() => {
              this.$store.commit("setUsername", this.username);
              this.$router.push("/messagecode");
            })
            .catch(() => {});
        } else {
          showConfirmDialog({
            title: "提示",
            message: "该账号以注册是否去登录",
          })
            .then(() => {
              this.$router.push("/login");
            })
            .catch(() => {});
        }
        console.log(res);
      });
    },
  },
};
</script>

<style scoped>
.van-form {
  margin-top: 3.125rem;
}
.van-button {
  margin-top: 6.25rem;
}
</style>
